<template>
    <div class="app-container" @keyup.enter="page" style="display: flex; flex-direction: column">
        <!--    查询项-->
        <el-drawer
                title="查询"
                :visible.sync="drawer.visible"
                :direction="drawer.direction"
                :before-close="queryClose"
                append-to-body
        >
            <div class="drawer-container">
                <el-form class="drawer-content" :model="params" label-width="100px" ref="queryForm" @keyup.enter.native="page">
                    <el-row type="flex">
                        <el-col :span="12">
                            <el-form-item prop="name" label="产品名称">
                                <el-input v-model="params.name" type="text" clearable show-word-limit maxlength="50"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="typeId" label="所属分类">
                                <el-input v-model="params.typeId" type="text" clearable show-word-limit maxlength="50"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="modelId" label="所属型号">
                                <el-input v-model="params.modelId" type="text" clearable show-word-limit maxlength="50"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="price" label="产品价格">
                                <el-input v-model="params.price" type="text" clearable show-word-limit maxlength="50"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="remark" label="产品说明">
                                <el-input v-model="params.remark" type="text" clearable show-word-limit maxlength="50"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
<!--                <div class="drawer-footer">-->
<!--                    <el-button @click="confirm" type="primary" size="medium">确认</el-button>-->
<!--                </div>-->
            </div>
        </el-drawer>
        <div class="z-position">
            <div class="z-position_left">
                <el-button type="primary" size="small" @click="handleInsert">新增</el-button>
                <el-button type="danger" size="small" @click="handleDel">删除</el-button>
            </div>
            <div class="z-position_right">
                <el-button type="primary" icon="el-icon-search" size="medium" @click="page">查询</el-button>
                <el-button type="primary" icon="el-icon-refresh" size="medium" @click="reset">重置</el-button>
                <el-button circle icon="el-icon-d-arrow-left" @click="showSearch"></el-button>
            </div>
        </div>
        <!--    表格-->
        <el-table :data="table.data" ref="table" border fit stripe @row-click="handleRowClick" @selection-change="handleSelectionChange">
            <el-table-column type="selection"/>
            <el-table-column align="center" type="expand">
                <template slot-scope="props">
                    <el-table
                        :data="props.row.configurations"
                        border
                    >
                        <el-table-column prop="name" label="配置名称"> </el-table-column>
                        <el-table-column prop="allPremium" label="总溢价"></el-table-column>
                        <el-table-column label="操作" width="200">
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    title="修改"
                                    @click="editSubTableLine(scope.row, scope.$index)"
                                >修改</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column prop="picPath" label="图片" align="center" width="150">
                <template slot-scope="scope">
                    <el-image
                        :src="scope.row.picPath"
                    ></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="产品名称"/>
            <el-table-column prop="typeName" label="所属分类"/>
            <el-table-column prop="modelName" label="所属型号"/>
            <el-table-column prop="price" label="产品价格"/>
            <el-table-column prop="remark" label="产品说明"/>
            <el-table-column label="操作" width="200px" fixed="right">
                <template #default="scope">
                    <!--           阻止冒泡-->
                    <div @click.stop>
                        <el-button @click="setConfiguration(scope)" type="text">配置</el-button>
                        <el-button @click="handleEdit(scope)" type="text">修改</el-button>
                        <el-button @click="handleDetail(scope)" type="text">详情</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                layout="sizes,total,prev, pager, next"
                @size-change="page"
                :page-sizes="[10, 20, 50, 100]"
                :total="pagination.total"
                :current-page.sync="pagination.pageOn"
                @current-change="page"
                @prev-click="page"
                @next-click="page"
                :page-size.sync="pagination.pageSize"
                style="flex-basis: 32px; flex-grow: 0;flex-shrink: 0;text-align: center"
                width="100"
        />
        <!--    弹窗-->
        <el-dialog :title="formDialog.title" :visible.sync="formDialog.visible" append-to-body :before-close="formClose">
            <el-form :model="formData" label-width="80px" ref="form" :rules="rules">
                <el-row>
                    <el-col :span="12">
                        <el-form-item prop="name" label="产品名称">
                            <el-input v-model="formData.name" type="text" clearable style="width:80%;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                            <el-form-item prop="typeId" label="产品分类">
                                <el-cascader
                                    :options="map.productTypeTrees"
                                    :props="{ checkStrictly: true,emitPath:false,value:'id',label:'name' }"
                                    v-model="formData.typeId"
                                    clearable
                                    style="width:80%;"/>
                            </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="modelId" label="所属型号">
                            <el-select v-model="formData.modelId" placeholder="请选择" style="width:80%;">
                                <el-option
                                    v-for="item in map.productModels"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="price" label="产品价格">
                            <el-input v-model="formData.price" type="text" clearable style="width:80%;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="fileId" label="产品图片">
                            <signle-pic v-model="formData.picPath" @on-success="uploadSuccess"></signle-pic>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="remark" label="产品说明">
                            <el-input v-model="formData.remark" type="text" clearable style="width:80%;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <el-button @click='formSave' type="primary">保存</el-button>
                <el-button @click="formClose">关闭</el-button>
            </template>
        </el-dialog>
        <!--    设置配置-->
        <el-dialog :title="view.configurationFormTitle" :visible.sync="view.configurationFormVisible" append-to-body :before-close="configurationFormClose">
            <el-form :model="configurationForm" label-width="80px" ref="configurationForm" :rules="configurationFormRules">
                <el-row>
                    <el-col :span="12">
                        <el-form-item prop="name" label="配置名称">
                            <el-input v-model="configurationForm.name" type="text" clearable style="width: 80%;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="remark" label="配置说明">
                            <el-input v-model="configurationForm.remark" type="text" clearable style="width: 80%;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="" label="总溢价">
                            <span style="font-size: 30px; color:#409EFF;">{{ allPremium }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10"></el-col>
                    <el-col :span="2">
                        <el-button @click='dialogInsert' type="primary" size="small">新增</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <el-table
                :data="dialogTableData"
                border
                style="width: 100%;margin-top: 10px;max-height: 40vh;overflow-y: auto;">
                <el-table-column
                    prop="value"
                    label="名称">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.value" type="text" clearable style="width: 90%;"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="premium"
                    label="溢价">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.premium" type="text" @blur="premiumBlur" oninput ="value=value.replace(/[^0-9.]/g,'')"  clearable style="width: 90%;"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="remark"
                    label="备注">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.remark" type="text" clearable style="width: 90%;"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="80">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            title="移除"
                            @click="removeLine(scope.row, scope.$index)"
                            style="color:#F56C6C;"
                        >移除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
                <el-button @click='configurationFormSave' type="primary">保存</el-button>
                <el-button @click="configurationFormClose">关闭</el-button>
            </template>
        </el-dialog>
        <el-dialog :title="detail.title" :visible.sync="detail.visible" :before-close="detailClose" append-to-body>
            <el-descriptions direction="horizontal" border :column="2">
                <el-descriptions-item label="产品名称">{{ detail.data.name }}</el-descriptions-item>
                <el-descriptions-item label="所属分类">{{ detail.data.typeName }}</el-descriptions-item>
                <el-descriptions-item label="所属型号">{{ detail.data.modelName }}</el-descriptions-item>
                <el-descriptions-item label="产品价格">{{ detail.data.price }}</el-descriptions-item>
                <el-descriptions-item label="产品说明">{{ detail.data.remark }}</el-descriptions-item>
            </el-descriptions>
        </el-dialog>
    </div>
</template>

<script src="./index.js">
</script>

<style scoped>
.z-position{
    height: 54px;
    line-height: 54px;
    margin-bottom: 20px;
}
.z-position_left{
    width: 50%;
    float: left;
}
.z-position_right{
    width: 50%;
    float: left;
    text-align: right;
}
/deep/ .el-table::before{
    display: none;
    z-index: inherit;
}
/deep/ .el-table--border{
    border-bottom: 1px solid #EBEEF5;
}
</style>
